<template>
  <div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="124px">
        <el-form-item label="姓名：">
          {{ personalmessagedata.fullName }}
        </el-form-item>
        <el-form-item label="电话：">
          <span>{{ personalmessagedata.phone | phoneFormat }}</span>
        </el-form-item>
        <el-form-item label="账号：">
          {{ personalmessagedata.account }}
        </el-form-item>
        <el-form-item label="密码：">
          <span>{{ '******' }}</span>
        </el-form-item>
        <el-form-item label="身份：">
          {{ personalmessagedata.roleInfoDTOS[0].roleName }}
        </el-form-item>
        <el-form-item label="身份证号：">
          {{ personalmessagedata.idCard | userid }}
        </el-form-item>
      </el-form>
      <div class="personalimg">
        <img :src="personalmessagedata.avatar" alt="" />
      </div>
      <div class="btn">
        <el-button type="primary" @click=";(centerDialogVisible = true), (title = '修改电话'), (Submit = 1)"
          >修改电话</el-button
        >
        <el-button
          type="primary"
          @click=";(centerDialogVisible = true), (title = '修改密码'), (Submit = 2)"
          style="margin-left: 40px"
          >修改密码</el-button
        >
      </div>
      <el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form :model="personalmessage" ref="ruleForm" label-width="125px" class="demo-ruleForm">
          <el-form-item label="原密码：" v-if="Submit == 2">
            <el-input v-model.trim="personalmessage.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" v-if="Submit == 2">
            <el-input @blur="check" v-model.trim="personalmessage.password"></el-input>
          </el-form-item>
          <el-form-item label="再次输入新密码：" v-if="Submit == 2">
            <el-input v-model.trim="password"></el-input>
          </el-form-item>
          <el-form-item label="密码强度：" v-if="Submit == 2">
            <div class="input_span">
              <span id="one" />
              <span id="two" />
              <span id="three" />
            </div>
            <div id="font">
              <div>弱</div>
              <div>中</div>
              <div>强</div>
            </div>
          </el-form-item>
          <el-form :model="personalmessage" ref="ruleForm" label-width="85px" class="demo-ruleForm">
            <el-form-item label="手机号码" v-if="Submit == 1">
              <el-input v-model.trim="personalmessage.phone"></el-input>
            </el-form-item>
          </el-form>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="sentpassword">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import api from '@/api/api'
import { PhoneFormat, userid } from '@/utils/pipe'
import { color } from 'echarts/lib/export'
export default {
  props: {
    personalmessagedata: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      form: {},
      Submit: 0,
      personalmessage: {
        avatar: '',
        fullName: '',
        id: '',
        idCard: '',
        oldPassword: '',
        password: '',
        patrolGridArea: '',
        phone: '',
        username: '',
      },
      isHide: true,
      title: '',
      password: '',
      roleName: '',
      showstatus: 0,
    }
  },
  methods: {
    check() {
      let reg = /^[0-9]*$/
      let elo = /^[A-Za-z]+$/
      let res = /^[A-Za-z0-9]{4,40}$/
      let ret = /^[a-zA-Z0-9,.'"/;:]*$/
      let bdf = /^[,.'"/;:]*$/
      const el = document.getElementById('one')
      const er = document.getElementById('two')
      const et = document.getElementById('three')
      if (this.personalmessage.password == '') {
        el.style.backgroundColor = ' #fff'
        er.style.backgroundColor = '#fff'
        et.style.backgroundColor = '#fff'
      } else if (
        reg.test(this.personalmessage.password) == true ||
        elo.test(this.personalmessage.password) == true ||
        bdf.test(this.personalmessage.password) == true
      ) {
        el.style.backgroundColor = '#F3654C'
        er.style.backgroundColor = '#fff'
        et.style.backgroundColor = '#fff'
      } else if (res.test(this.personalmessage.password) == true) {
        el.style.backgroundColor = '#fff'
        er.style.backgroundColor = '#FFB600'
        et.style.backgroundColor = '#fff'
      } else if (ret.test(this.personalmessage.password) == true) {
        el.style.backgroundColor = '#fff'
        er.style.backgroundColor = '#fff'
        et.style.backgroundColor = '#2CBB78'
      }
    },
    cancel() {
      this.personalmessage.oldPassword = ''
      this.personalmessage.password = ''
      this.personalmessage.phone = ''
      this.centerDialogVisible = false
    },
    sentpassword() {
      switch (this.Submit) {
        case 1:
          var phone = this.personalmessage.phone
          var reg = /^1[3456789]\d{9}$/
          if (reg.test(phone)) {
            this.changeusermessage()
            this.personalmessage.phone = ''
          } else if (phone == '') {
            this.$message({
              message: '请输入手机号码！',
              type: 'error',
            })
          } else {
            this.$message({
              message: '输入格式有误！请重新输入',
              type: 'error',
            })
          }
          break
        case 2:
          if (this.personalmessage.password == '' || this.personalmessage.oldPassword == '' || this.password == '') {
            this.$message({
              message: '请填写密码后再进行操作！',
              type: 'error',
            })
          } else if (this.personalmessage.oldPassword != this.personalmessagedata.password) {
            this.$message({
              message: '请正确输入原密码！',
              type: 'error',
            })
          } else if (this.personalmessage.password != this.password) {
            this.$message({
              message: '二次输入密码不符！',
              type: 'error',
            })
          } else {
            this.changeusermessage()
            this.personalmessage.password = ''
            this.personalmessage.oldPassword = ''
            this.$message({
              message: '请重新登录！',
              type: 'info',
            })
            this.$router.push('/')
          }
          break
        default:
          break
      }
    },
    changeusermessage() {
      api.changeusermessage(this.personalmessage).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '修改成功！',
            type: 'success',
          })
          this.$parent.getusermessage()
          this.centerDialogVisible = false
        }
      })
    },
  },
  mounted() {
    this.personalmessage.id = this.personalmessagedata.userId
  },
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 984px;
  height: 598px;
  margin: 60px auto;
  background-color: #fff;
  border-radius: 15px 15px 15px 15px;
  padding-left: 30px;
  padding-top: 20px;
  padding-right: 30px;
  ::v-deep .el-form-item__label {
    text-align: left;
  }
  .el-input {
    width: 75%;
  }
  .personalimg {
    position: absolute;
    width: 199px;
    height: 239px;
    top: 5%;
    right: 24%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .input_span {
    span {
      display: inline-block;
      width: 50px;
      height: 10px;
      border: 1px solid #ccc;
      &:first-child {
        border-right: 0;
        border-radius: 5px 0 0 5px;
      }
      &:last-child {
        border-left: 0;
        border-radius: 0 5px 5px 0;
      }
    }
  }
  #font {
    width: 153px;
    display: flex;
    justify-content: space-between;
    div {
      width: 39px;
      text-align: center;
    }
  }

  .btn {
    display: flex;
    width: 400px;
    margin: 0 auto;
  }
}
</style>
